<template>
  <div>
    <el-container>
      <el-aside width="357px">
        <div class="aside" style="margin-top: 30px">
          <span>缴费人员</span>
          <el-input
            v-model="input"
            placeholder="输入缴费人员"
            style="width: 320px"
            size="medium"
          ></el-input>
        </div>
        <div class="aside">
          <span>缴费名称</span>
          <el-input
            v-model="input1"
            placeholder="输入缴费项目/名称"
            style="width: 320px"
            size="medium"
          ></el-input>
        </div>
        <div class="aside">
          <span>支付类型</span>
          <el-select
            v-model="value"
            placeholder="输入支付类型"
            style="width: 320px"
            size="medium"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="aside">
          <span>支付状态</span>
          <el-select
            v-model="value1"
            placeholder="输入支付状态"
            style="width: 320px"
            size="medium"
          >
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="aside">
          <span>支付时间</span>
          <el-date-picker
            v-model="value2"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 320px"
            size="medium"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </div>
        <div class="aside">
          <span>缴费金额</span>
          <el-input
            v-model="input2"
            placeholder="输入缴费金额"
            style="width: 320px"
            size="medium"
          ></el-input>
        </div>
        <div class="aside">
          <span>缴费优先级</span>
          <el-input
            v-model="input3"
            placeholder="缴费优先级"
            style="width: 320px"
            size="medium"
          ></el-input>
        </div>
        <div style="margin: 20px 0 0 20px">
          <el-button style="width: 150px; font-size: 12px" @click="reset"
            >重置</el-button
          >
          <el-button
            type="primary"
            style="width: 150px; font-size: 12px; margin-left: 20px"
            @click="inquire"
            >立即查询</el-button
          >
        </div>
      </el-aside>
      <el-main>
        <div class="title">
          <span style="font-size: 24px; font-weight: bold">缴费列表</span>
          <el-button
            type="primary"
            icon="el-icon-download"
            @click="exportToExcel"
            >导出</el-button
          >
        </div>
        <template>
          <el-table
            :data="tableData"
            border
            style="width: 100%; margin-top: 20px"
            v-loading="loading"
          >
            <el-table-column prop="payname" label="缴费产品" width="100">
            </el-table-column>
            <el-table-column
              prop="username"
              label="缴费人员"
              width="120"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="costtype"
              label="支付类型"
              align="center"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="paymoney"
              label="缴费金额"
              align="center"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="paylevel"
              label="缴费优先级"
              align="center"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="paytime"
              label="支付时间"
              align="center"
              width="140"
            ></el-table-column>
            <el-table-column
              prop="coststatus"
              label="支付状态"
              align="center"
              width="130"
            ></el-table-column>
            <el-table-column prop="address" label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  style="color: #62a8ea"
                  @click="handleEdit(scope.$index, scope.row)"
                  >查看</el-button
                >
                <el-button
                  size="mini"
                  style="color: #606266"
                  @click="handlederive(scope.$index, scope.row)"
                  >导出</el-button
                >
                <el-button
                  size="mini"
                  style="border: 0.5px solid #fbc4c4"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
        <div
          class="block"
          style="display: flex; justify-content: flex-end; margin-top: 20px"
        >
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import moment from "moment";
import * as XLSX from "xlsx"; // 引入 xlsx 库
export default {
  data() {
    return {
      loading: true,
      // 输入框
      input: "", // 缴费人员
      input1: "", // 缴费名称
      input2: "", // 缴费金额
      input3: "", // 缴费优先级
      // 支付类型
      options: [
        {
          value: "1",
          label: "支付宝支付",
        },
        {
          value: "2",
          label: "微信支付",
        },
        {
          value: "3",
          label: "银联支付",
        },
      ],
      // 支付状态
      options1: [
        {
          value: "1",
          label: "已支付",
        },
        {
          value: "2",
          label: "未支付",
        },
      ],
      value1: "", // 支付状态
      value: "", // 支付类型
      // 时间
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value2: "", // 时间
      // 表单
      tableData: [],
      // 分页
      currentPage4: 1,
      total: 0,
      pageSize: 10,
      num: 0,
      //
      token: localStorage.getItem("token"),
    };
  },
  created() {
    this.apply();
  },
  methods: {
    // 导出
    exportToExcel() {
      this.$confirm("确定导出续费列表？, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // 准备数据
        const data = this.tableData.map((item) => ({
          缴费产品: item.payname,
          缴费人员: item.username,
          支付类型: item.costtype,
          缴费金额: item.paymoney,
          缴费优先级: item.paylevel,
          支付时间: item.paytime,
          支付状态: item.coststatus,
        }));

        // 创建工作表
        const worksheet = XLSX.utils.json_to_sheet(data);

        // 创建工作簿
        const workbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(workbook, worksheet, "缴费列表");

        // 导出文件
        XLSX.writeFile(workbook, "缴费列表.xlsx");
      });
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.apply();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.num = val - 1;
      this.apply();
    },
    // 渲染
    apply() {
      this.$axios({
        url: "/cost/getPayMessage",
        method: "get",
        params: {
          currPage: this.num,
          pageNum: this.pageSize,
        },
      }).then((res) => {
        // if (res.data.code == 200) {
        this.total = res.data.total;
        console.log(res);
        this.tableData = res.data.data;
        setTimeout(() => {
          this.loading = false;
        }, 500);
        for (let a = 0; a < this.tableData.length; a++) {
          if (this.tableData[a].coststatus == 1) {
            this.tableData[a].coststatus = "已支付";
            const data = moment(this.tableData[a].paytime).format(
              "YYYY-MM-DD hh:mm:ss"
            );
            this.tableData[a].paytime = data;
            if (this.tableData[a].costtype == 1) {
              this.tableData[a].costtype = "支付宝支付";
            }
          } else if (this.tableData[a].coststatus != 1) {
            this.tableData[a].coststatus = "未支付";
            this.tableData[a].costtype = "暂无";
            this.tableData[a].paytime = "暂无";
          }
          if (this.tableData[a].username == null) {
            this.tableData[a].username = "暂无";
          }
        }
        // }
      });
    },
    // 查询
    inquire() {
      this.$axios({
        url: "/cost/getPayMessage",
        method: "GET",
        params: {
          username: this.input,
          payname: this.input1,
          costtype: this.value,
          coststatus: this.value1,
          startDate: this.value2[0],
          endDate: this.value2[1],
          paymoney: this.input2,
          paylevel: this.input3,
          currPage: this.num,
          pageNum: this.pageSize,
        },
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.data;
        this.total = res.data.total;
      });
    },
    // 重置    有问题
    reset() {
      if (
        this.input != " " ||
        this.input1 != " " ||
        this.input2 != " " ||
        this.input3 != " " ||
        this.value != " " ||
        this.value1 != " " ||
        this.value2[0] != " " ||
        this.value2[1] != " "
      ) {
        this.input = "";
        this.input1 = "";
        this.input2 = "";
        this.input3 = "";
        this.value = "";
        this.value1 = "";
        this.value2[0] = "";
        this.value2[1] = "";
        this.apply();
      }
    },
    // 查看
    handleEdit(index, row) {
      console.log(row);
      this.$router.push({
        path: "/pay/payDetail",
        query: {
          detailld: row.id,
        },
      });
    },
    // 导出（里）
    handlederive(index, row) {
      console.log(XLSX); // 打印 XLSX 对象，用于调试
      if (!XLSX || !XLSX.utils) {
        console.error("XLSX is not loaded correctly!");
        return;
      } // 将单行数据row放在一个数组中

      const rowsArray = [row]; // 将数组转换为工作表

      const worksheet = XLSX.utils.json_to_sheet(rowsArray); // 创建一个新的工作簿

      const workbook = XLSX.utils.book_new(); // 将工作表添加到工作簿中，并命名为"Sheet1"

      XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1"); // 将工作簿保存为Excel文件

      XLSX.writeFile(workbook, "单个导出.xlsx");
    },
    // 删除
    handleDelete(index, row) {
      console.log(row);
      this.$confirm("此操作将删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$axios({
          url: "/cost/delCostData",
          method: "GET",
          params: {
            id: row.id,
            token: this.token,
          },
        }).then((res) => {
          console.log(res);
          this.apply();
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-aside {
  height: 600px;
}
.aside {
  span {
    display: block;
    margin: 20px 0 5px;
    font-size: 14px;
  }
  margin-left: 20px;
}
.title {
  display: flex;
  justify-content: space-between;
}
</style>